<script setup lang="ts">
import { ref } from 'vue';
import { RuleDetailApi, type RuleDetailVO } from './api';
import type { FormInstance } from 'element-plus';
import { ElDrawer, ElDescriptions, ElDescriptionsItem } from 'element-plus';
import { filter_rule_level, filter_rule_level_type } from './rules';
const show = ref(false);
const form = ref<RuleDetailVO>({});
const open = (b: boolean, f: RuleDetailVO) => {
  show.value = b;
  form.value = f;
  console.log('b',b)
  console.log('f',f)
};
const formIns = ref<FormInstance>();
const activeName = ref('first');
const radio1 = ref('1');
const example_data = ref({
  '1': {
    name: '审查合同主体信息是否准确、完整；合同主体是否具有签订合同的相应主体资格',
    level: '2',
    description:
      '（1）审查主体信息是否完整、准确：①自然人的主要信息为：姓名、性别、住所地、身份证号码、联系方式、出生日期、单位及职务等；②法人或者其他组织的主要信息为：法人名称或者其他组织名称、住所地。法定代表人姓名（或者负责人姓名）、统一社会信用代码、银行账户、银行账号等；③如为个体工商户，则主体应列个体工商户字号，同时列明经营者个人身份信息； （2）审查是否具备主体资格。①自然人是否具备完全民事行为能力，如不具备，是否经过其监护人的追认；②法人或其他组织而言，主要审查其是否依法设立并有效存续；如果签订合同的主体是法人的分支机构，必须依法登记取得营业执照，否则则需要法人授权，而未经特别授权，法人的职能部门等都不具有签订合同的主体资格。 （3）某些特殊行业实行特许经营的，还需要合同主体具备特别的资格要求，例如建设工程承包人需取得相应的建筑工程施工资质，医疗单位需取得相应许可证（医疗机构许可证），具体审核时需考虑是否涉及特许经营行业，是否需参照相关特许经营的法律法规的规定。 （4）合同主体不属于禁止从事本合同所涉及的民事行为的主体，例如一是机关法人，二是以公益为目的的非营利法人，三是非法人组织等不得作为保证人；股东及合伙人的被限制同目标企业交易等；',
  },
  '2': {
    name: '审查支付时间是否准确、支付方式是否明确',
    level: '1',
    description:
      '1. 一次性付款审查：仔细检查合同条款，以确定是否明确列出了一次性付款的具体支付时间。如果合同中没有明确规定支付时间，应提出修改建议，要求合同另一方明确规定具体的一次性付款时间。 2. 分期付款时间规定：细致审查合同中的分期付款条款，确保每期付款的时间已被详尽且清晰地定义。若发现有任何期限的付款时间不明确或未提及，必须提出质询，并要求对合同进行修订，以反映每期的准确支付时间。 3. 周期性付款时间明晰性：检查合同中是否具体规定了月、年、季度等周期性付款的支付时间。如果合同缺少明确的支付时间约定，应指出此不足，并与合同另一方协商，添加明确的周期性付款时间规定。 4.审查是选择转账支付还是支票支付。',
  },
} as any);
const props = defineProps({
  groupList: {
    type: Array as () => any[],
    default: () => [],
  },
});
const emits = defineEmits<{
  (e: 'ok');
}>();
const handleClose = (done: () => void) => {
  done();
  // open(false, {});
};
const save = async () => {
  const b = await formIns.value.validate();
  if (b) {
    if (form.value.id) {
      await RuleDetailApi.updateRuleDetail(form.value);
    } else {
      await RuleDetailApi.createRuleDetail(form.value);
    }
  }
  emits('ok');
  open(false, {});
};
defineExpose({
  open,
});
</script>

<template>
  <!-- <el-dialog v-model="show" title="编辑规则"> -->
  <el-drawer
    v-model="show"
    :model="form"
    title="编辑规则"
    direction="btt"
    size="80%"
    class="drawer"
    :before-close="handleClose"
  >
    <el-row style="height: 100%" gutter="20">
      <el-col :span="14">
        <el-form ref="formIns" :model="form" status-icon label-width="100px">
          <el-form-item label="规则名称" prop="name" required>
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="风险等级" prop="level" required>
            <el-select v-model="form.level">
              <el-option label="高风险" :value="1" />
              <el-option label="中风险" :value="2" />
              <el-option label="低风险" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="规则描述" prop="description" required>
            <el-input type="textarea" v-model="form.description" />
          </el-form-item>
          <el-form-item label="规则分组" prop="groupId" required>
            <el-select v-model="form.groupId">
              <el-option
                v-for="item in groupList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="版本" prop="version" required>
            <el-input-number v-model="form.version" />
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="填写示例" name="first" class="overflow-auto">
            <el-radio-group v-model="radio1">
              <el-radio-button label="示例1" value="1" />
              <el-radio-button label="示例2" value="2" />
            </el-radio-group>
            <el-descriptions
              title=""
              style="margin-top: 20px"
              direction="vertical"
              :column="1"
            >
              <el-descriptions-item align="left" label="规则名称">
                {{ example_data[radio1].name }}
              </el-descriptions-item>
              <el-descriptions-item align="left" label="危险等级">
                <el-tag
                  :type="filter_rule_level_type(example_data[radio1].level)"
                  >{{ filter_rule_level(example_data[radio1].level) }}</el-tag
                >
              </el-descriptions-item>
              <el-descriptions-item align="left" label="规则详情">
                {{ example_data[radio1].description }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="效果验证" name="second">
            <el-empty :image-size="100" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <template #footer>
      <el-button @click="save">保存</el-button>
    </template>
  </el-drawer>
  <!-- </el-dialog> -->
</template>

<style scoped lang="scss"></style>
